<template>
	<div style=" text-align: left;">
		<el-form :inline="true" :model="queryForm" class="demo-form-inline" style="margin-top: 15px;" align="center">
			<div style="float: left;">
				<el-input v-model="queryForm.name" style="width: 150px;" size="medium" placeholder="酒店名称" />&nbsp;
				<el-input v-model="queryForm.linkName" style="width: 150px;" size="medium" placeholder="联系人" />&nbsp;
				<el-input v-model="queryForm.linkTel" style="width: 150px;" size="medium" placeholder="联系电话" />&nbsp;
				<el-button type="primary" size="medium" @click="handleList()">查询</el-button>
				<el-button type="danger" size="medium" @click="handadd()">新增</el-button>
				<br />&nbsp;&nbsp;&nbsp;
			</div>
		</el-form>
		<el-table :border="true" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
			<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
			<el-table-column v-if="show" prop="id">
			</el-table-column>
			<el-table-column prop="name" label="名字" align="center">
			</el-table-column>
			<el-table-column prop="star" label="星级" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="state" label="状态" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="address" label="地址" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="linkName" label="联系人" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="linkTel" label="联系电话" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="tel" label="酒店电话" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="handle" label="入驻时间" :formatter="formatterDate" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="操作" show-overflow-tooltip align="center">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-user-solid" circle :title="message1" @click="handleEdit(scope.$index, scope.row)"></el-button>
					<el-button type="primary" icon="el-icon-user-solid" circle :title="message1" @click="handleEdit(scope.$index, scope.row)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div style="text-align: center;margin-top: 20px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.page"
			 :page-sizes="[5, 10, 20, 50]" :page-size="queryForm.rows" layout="total, sizes, prev, pager, next, jumper" :total="queryForm.total">
			</el-pagination>
		</div>


		<el-dialog @close="handledialogMergeFormClosed" title="详情信息" :visible.sync="dialogMergeForm">
			<el-form :model="mergeForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="酒店名字" prop="name">
					<el-input v-model="mergeForm.name"></el-input>
				</el-form-item>
				<el-form-item label="酒店星级" prop="star">
					<el-input v-model="mergeForm.star"></el-input>
				</el-form-item>
				<el-form-item label="联系人姓名" prop="linkName">
					<el-input v-model="mergeForm.linkName"></el-input>
				</el-form-item>
				<el-form-item label="酒店地址" prop="address">
					<el-input v-model="mergeForm.address"></el-input>
				</el-form-item>
				<el-form-item label="集团品牌" prop="ewmLogo">
					<el-input v-model="mergeForm.ewmLogo"></el-input>
				</el-form-item>
				<el-form-item label="酒店介绍" prop="introduction">
					<el-input v-model="mergeForm.introduction"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogMergeForm = false">取 消</el-button>
				<el-button type="primary" @click="handleMerge">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	//时间格式化导包
	import {
		formatDate
	} from '../../assets/js/TimeFiter.js'
	export default {
		name: 'HotelList',
		data() {
			return {
				show: false,
				dialogMergeForm: false,
				tableData: [],
				queryForm: { //分页所需
					page: 1,
					rows: 5,
					total: 0,
					name: null,
					linkName: null,
					linkTel: null
				},
				mergeForm: {
					id: null,
					name: null,
					star: null,
					linkName: null,
					address: null,
					ewmLogo: null,
					introduction: null,
					state: 2
				},
				message1: "审核入驻申请",
				message2: "删除入驻申请"
			}
		},
		methods: {
			handleSizeChange(rows) {
				//每页显示改变
				this.queryForm.page = 1
				this.queryForm.rows = rows
				this.doList()
			},
			handleCurrentChange(page) {
				//指定页码跳转
				this.queryForm.page = page
				this.doList()
			},
			doList: function() {
				this.axios.post(this.axios.urls.SYS_ADMIN_DOLISTSELLER, this.queryForm).then((response) => {
					// console.log(response);
					this.tableData = response.data.result;
					this.queryForm.page = response.data.page
					this.queryForm.rows = response.data.rows
					this.queryForm.total = response.data.total
				});
			},
			//查询
			handleList: function() {
				this.doList()
			},
			handleEdit: function(index, row) {
				this.mergeForm.id = row.id
				this.mergeForm.name = row.name
				this.mergeForm.star = row.star
				this.mergeForm.linkName = row.linkName
				this.mergeForm.address = row.address
				this.mergeForm.ewmLogo = row.ewmLogo
				this.mergeForm.introduction = row.introduction
				this.dialogMergeForm = true
			},
			handleDel: function(index, row) {
				// console.log(row.id);
				this.$confirm('您确定要删除此记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.post(this.axios.urls.SYS_ADMIN_DODEL, {
						id: row.id
					}).then((response) => {
						this.$message({
							message: '删除成功',
							type: 'success'
						})
						this.doList()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
			},
			handledialogMergeFormClosed: function() {
				this.$refs['mergeForm'].resetFields();
				this.mergeForm.id = null
				this.mergeForm.name = null
				this.mergeForm.star = null
				this.mergeForm.linkName = null
				this.mergeForm.address = null
				this.mergeForm.ewmLogo = null
				this.mergeForm.introduction = null
			},
			handleMerge: function() {
				this.axios.post(this.axios.urls.SYS_ADMIN_DORZSH, this.mergeForm).then((response) => {
					let data = response.data
					this.$message({
						message: data.message,
						type: 'success',
					})
					this.dialogMergeForm = false
					this.doList()
				})
			},
			handadd: function() {
				this.$router.push('/HotelInformation')
			},
			//时间格式化
			formatterDate: function(row, column) {
				let time = row.openTime;
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd');
			}
		},
		created() { //钩子函数
			//先传默认的对象{}参数
			this.doList()

		},


	}
</script>

<style>
</style>
